import doT from 'dot';
import echarts from 'echarts';
import './Popup.css';

const timeData = [
    '0:00', '1:00', '2:00',
    '3:00', '4:00', '5:00',
    '6:00', '7:00', '8:00',
    '9:00', '10:00', '11:00',
    '12:00', '13:00', '14:00',
    '15:00', '16:00', '17:00',
    '18:00', '19:00', '20:00',
    '21:00', '22:00', '23:00',
];

export default class Popup {
    constructor(popup, map) {
        this.popup = popup;
        this.map = map;
        const pupupDom = document.createElement('div');
        pupupDom.className = 'popup-box';
        popup.setDOMContent(pupupDom);
        this.echarts = echarts.init(pupupDom);
        this.option = {
            calculable: true,
            color: ['#00EDFF', '#00aeff', '#FEC819'],
            textStyle: {
                color: '#eee'
            },
            title: {
                text: '雨量流量关系图',
                x: 'center',
                textStyle: {
                    color: '#eee'
                }
            },
            tooltip: {
                trigger: 'axis',
                // formatter: '时间:{b0}<br />降水量: {c0} (mm)<br />车速: {c2} (km/h)'
                formatter: function (params) {
                    let str = '时间:' + params[0].name + '<br />';
                    if (params[0] && params[0].seriesName.indexOf('降水量') !== -1) {
                        str += '降水量: ' + params[0].value + '(mm) <br/>';
                    } else {
                        str += '车速: ' + params[0].value + '(km/h) <br/>';
                        return str;
                    }

                    if (params[1] && params[1].seriesName.indexOf('降水量') == -1) {
                        str += '车速: ' + params[1].value + '(km/h) <br/>';
                        return str;
                    }

                    if (params[2] && params[2].seriesName.indexOf('车速') !== -1) {
                        str += '车速: ' + params[2].value + '(km/h) <br/>';
                        return str;
                    }
                    return str;
                },
                // axisPointer: {
                //     animation: false
                // }
            },
            legend: {
                data: ['降水量(柱状)', '降水量(折线)', '车速'],
                textStyle: {
                    color: '#eee'
                },
                top: 30
            },
            // grid: [{
            //     left: 50,
            //     right: 50,
            //     height: '25%'
            // }, {
            //     left: 50,
            //     right: 50,
            //     top: '65%',
            //     height: '25%'
            // }],
            grid: {
                borderWidth: 0,
                top: 80,
                bottom: 50
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeData,
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    alignWithLabel: true
                },
            },
            yAxis: [{
                name: '降水量(mm)',
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                        opacity: 0.2
                    }
                },
                position: 'left',
            }, {
                name: '车速(km/h)',
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee',
                        opacity: 0.2
                    }
                },
                position: 'right',
            }],
            dataZoom: [{
                "show": true,
                "height": 25,
                "xAxisIndex": [
                    0
                ],
                bottom: 0,
                "start": 0,
                "end": 100,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '80%',
                handleStyle: {
                    color: "#d3dee5",
                },
                textStyle: {
                    color: "#fff"
                },
                borderColor: "#90979c",
                backgroundColor: 'rgba(47,69,84,0)',
                fillerColor: 'rgba(167,183,204,0.1)',
                dataBackground: {
                    lineStyle: {
                        color: '#eee',
                    },
                    areaStyle: {
                        color: '#aaa'
                    }
                }
            }, {
                "type": "inside",
                "show": true,
                "height": 25,
                "start": 0,
                "end": 100
            }],
            series: [{
                name: '降水量(柱状)',
                type: 'bar',
                symbolSize: 8,
                hoverAnimation: false,
                data: [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
                ],
                symbol: 'circle',
                symbolSize: 8,
            }, {
                name: '降水量(折线)',
                type: 'line',
                symbolSize: 8,
                hoverAnimation: false,
                data: [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
                ],
                symbol: 'circle',
                symbolSize: 8,
            }, {
                name: '车速',
                type: 'line',
                yAxisIndex: 1,
                symbolSize: 8,
                hoverAnimation: false,
                data: [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
                ],
                symbol: 'circle',
                symbolSize: 8,
            }]
        };
        this.echarts.setOption(this.option);
    }

    setData(properties, e) {
        this.option.series[0].data = JSON.parse(properties.precipitation);
        this.option.series[1].data = JSON.parse(properties.precipitation);
        this.option.series[2].data = JSON.parse(properties.Speed);
        setTimeout(() => {
            this.popup.setLngLat(e.lngLat.toArray()).addTo(this.map);
            this.echarts.resize();
            this.echarts.setOption(this.option);
            if (!this.isShow) {
                $('.minemap-popup').css('visibility', 'hidden');
            }
        }, 50);
    }

    hidden() {
        this.isShow = false;
    }

    show() {
        this.isShow = true;
        $('.minemap-popup').css('visibility', 'visible');
    }
}